<template>
	<view>
		<!-- 页头 -->
		<view class="header bg-gradual-blue" :style="{'padding-top': menuButtonTop}">
			<view class="u-flex" style="justify-content: left;">
				<!-- <image src="/static/images/logo-white.png" mode="heightFix" :style="{'height':logoHeight,'weight':logoHeight}"></image>
				<text class="u-font-36 bold-txt u-p-l-6">青猿驿站</text> -->
			</view>
			<view class="u-text-center u-p-t-60 u-p-b-30 u-flex">
				<text class="u-font-40 u-flex-1 u-text-left">我的回收统计</text>
				<view class="u-p-t-20"><text class="u-font-24">数据更新于：{{time}}</text></view>
			</view>
			<view class="filter-bar u-flex">
				<view class="item" @click="show = true">
					<!-- <picker @change="" :value="storeType" :range="mystorelist" range-key="packstationname"> -->
						<view>
							<text class="u-p-l-4 u-p-r-10 u-font-24">{{ mydata.mystorename }}</text>
							<u-icon name="arrow-down" color="#fff" size="20"></u-icon>
						</view>
					<!-- </picker> -->
				</view>
				<view class="u-flex-1"></view>
				<view class="item u-m-r-0">
					<picker @change="timeConfirm" :value="timeType" :range="timeList" range-key="label">
						<view>
							<u-icon name="calendar"></u-icon>
							<text class="u-p-l-4 u-p-r-10 u-font-24">{{timeList[timeType].label}}</text>
							<u-icon name="arrow-down" size="20"></u-icon>
						</view>
					</picker>
					<u-calendar v-model="customTime" mode="range" active-bg-color="rgb(16,190,202)" range-bg-color="rgba(16,190,202,0.13)" range-color="rgb(16,190,202)" @change="calendarChange"></u-calendar>
				</view>
			</view>
			<!-- 自定义时间 -->
			<view class="u-flex u-p-t-10" v-if="timeType == 9">
				<view class="u-flex-1"><text class="u-font-24">查询时间范围：</text></view>
				<view><text class="u-font-24">{{startDate}} 至 {{endDate}}</text></view>
			</view>
			<!-- <u-dropdown @open="openMenu">
				<u-dropdown-item v-model="pfranchiseid" title="加盟商" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="pstoreid" title="站点" :options="options2"></u-dropdown-item>
				<u-dropdown-item v-model="pstaffid" title="员工" :options="options3"></u-dropdown-item>
			</u-dropdown> -->
		</view>
		
		<!-- 数据展示 -->
		<view class="content">
			
			<!-- 数据分类 -->
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#ffffff" inactive-color="#ffffff" bg-color="#ffffff00" font-size="28" ref="tabs"
					:list="typelist" :current="current" @change="(index)=>{current = index;}" :is-scroll="false" swiperWidth="750">
				</u-tabs-swiper>
			</view>
			
			<view v-if="!loading" style="margin-top: -26rpx;">
				<!-- 入库统计 -->
				<store-in ref="storeIn" :params="params" v-if="current == 0"></store-in>
				<!-- 出库统计 -->
				<store-out ref="storeOut" :params="params" v-if="current == 1"></store-out>
				<!-- 库存统计 -->
				<store-stock ref="storeStock" :params="params" v-if="current == 2"></store-stock>
			</view>
			<view class="loading-box" v-else>
				<u-loading mode="circle" color="#10beca" size="60"></u-loading>
			</view>
		</view>
		<!-- 底部菜单 -->
		<tabbar :current="0"></tabbar>
		<!-- 选择站点列表 -->
		<shopList :show="show" @close="show = false" @replacestore="replacestore" @choose="show = true"></shopList>
		<!-- 多列联动选择 -->
		<!-- <u-select v-model="show" mode="mutil-column-auto" :list="optionlist" @confirm="optionconfirm"></u-select> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
	import tabbar from '../components/tabbar/tabbar.vue'
	import shopList from '../components/shopList/shopList.vue';
	import storeIn from '@/components/shop/statistics/storeIn.vue'
	import storeOut from '@/components/shop/statistics/storeOut.vue'
	import storeStock from '@/components/shop/statistics/storeStock.vue'
	
	export default {
		components:{
			tabbar,
			shopList,
			storeIn,
			storeOut,
			storeStock
		},
		data() {
			return {
				loading: true,
				typelist: [
					{
						value: 0,
						name: '入库统计'
					},
					{
						value: 1,
						name: '出库统计'
					},
					{
						value: 2,
						name: '库存统计'
					}
				],
				current: 0,
				// 门店数据搜索选项
				optionlist:[],
				
				menuButtonTop: '44px',
				logoHeight: '32px',
				// 站点选择
				show: false,
				mydata:{
					mystorename: '',
					usename:'',
					franchisename: ''
				},
				// 筛选条件
				key: "",
				customTime: false,
				time: '',
				timeType: 3,
				startDate: '',
				endDate: '',
				timeChooseShow: false,
				timeList: [{
						value: 0,
						label: '全部'
					},
					{
						value: 1,
						label: '今日'
					},
					{
						value: 2,
						label: '昨日'
					},
					{
						value: 3,
						label: '本月'
					},
					{
						value: 4,
						label: '上月'
					},
					{
						value: 5,
						label: '本季度'
					},
					{
						value: 6,
						label: '上季度'
					},
					{
						value: 7,
						label: '本年'
					},
					{
						value: 8,
						label: '上年'
					},
					{
						value: 9,
						label: '自定义'
					}
				],
				pfranchiseid: 0,
				pstoreid: 0,
				pstaffid: 0,
				params:{}, //向组件发送请求参数
				options1: [],
				options2: [],
				options3: []
			};
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menuButtonTop = wx.getMenuButtonBoundingClientRect().top + 'px'
			this.logoHeight = wx.getMenuButtonBoundingClientRect().height + 'px'
			// #endif
			this.getStatisticsOption()
		},
		computed: {
			...mapState({
				userdetail: state => state.userdetail,
				franchiseId: state => state.franchiseId,
				storeId: state => state.storeId
			})
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			openMenu(index){
				switch (index){
					case 0:
						let array0 = []
						this.optionlist.forEach((item)=>{
							array0.push({
								label: item.label,
								value: item.value,
							})
						})
						this.options1 = array0
						break;
					case 1:
						let array1 = []
						try {
							this.optionlist.find((item)=>item.value == this.pfranchiseid).children.forEach((item)=>{
								array1.push({
									label: item.label,
									value: item.value,
								})
							})
						} catch (error) {
							
						}
						this.options2 = array1
						break;
					case 2:
						let array2 = []
						try {
							this.optionlist.find((item)=>item.value == this.pfranchiseid).children.find((item)=>item.value == this.pstoreid).children.forEach((item)=>{
								array2.push({
									label: item.label,
									value: item.value,
								})
							})
						} catch (error) {
							//TODO handle the exception
						}
						this.options3 = array2
						break;
					default:
						break;
				}
			},
			// 条件筛选
			filterChange(obj){
				console.log('filterChange',obj)
				// for(let key in obj){
				// 	this.$set(this,key,obj[key])
				// }
				// this.getList(true);
				this.key = obj.key
				this.sendParams()
			},
			// 清除筛选条件
			clean(){
				
			},
			// 门店数据搜索选项选择
			optionconfirm(value){
				console.log('门店数据搜索选项选择',value)
			},
			// 获取门店数据搜索选项
			getStatisticsOption(){
				return this.$u.post('/Statistics/Store/Option',{
					// endDate: this.endDate,
					// startDate: this.startDate,
					// timeType: this.timeType,
				}).then((res)=>{
					this.optionlist = []
					console.log('获取门店数据搜索选项',res)
					let array = []
					res.forEach((item,index)=>{
						array.push({
							value: item.id,
							label: item.name,
							children: []
						})
						if(item.storelist.length > 0){
							item.storelist.forEach((cell,i)=>{
								array[index].children.push({
									value: cell.id,
									label: cell.name,
									children: []
								})
								if(cell.stafflist.length > 0){
									cell.stafflist.forEach((con)=>{
										array[index].children[i].children.push({
											value: con.id,
											label: con.name,
										})
									})
								}
							})
						}
					})
					console.log('格式化后的门店数据搜索选项',array)
					this.optionlist = array
					
					// this.optionlist.forEach((item)=>{
					// 	this.options1.push({
					// 		label: item.label,
					// 		value: item.value,
					// 	})
					// })
				})
			},
			
			replacestore(item) {
				console.log('replacestore',item)
				this.mydata.mystorename = item.mystorename
				this.mydata.franchisename = item.franchisename
				// 获取总览数据
				this.sendParams()
			},
			// getSmallStock(item){
			// 	uni.navigateTo({
			// 		url: 'waste/waste?id='+item.id+'&name='+item.name+'&isweighing='+item.isweighing
			// 	})
			// },
			//发送请求参数
			sendParams(){ 
				this.loading = true
				this.params = {
					endDate: this.endDate,
					startDate: this.startDate,
					timeType: this.timeType,
					franchiseId: this.franchiseId,
					storeId: this.storeId,
					staffId: this.userdetail.id,
					key: this.key
				}
				this.time = this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss');
				setTimeout(()=>{
					this.loading = false
				},300)
			},
			timeConfirm(e) {
				// 选择时间类型
				this.timeType = e.detail.value
				if (this.timeType == 9) {
					this.customTime = true
				} else {
					this.sendParams()
				}
			},
			calendarChange(e) {
				// 选择自定义时间范围
				console.log(e);
				this.startDate = e.startDate
				this.endDate = e.endDate
				this.sendParams()
			},
			percent(weight,count) {
				let total = count
				if (total > 0) {
					return Number((weight / total * 100).toFixed(2))
				} else {
					return 0
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loading-box{
		height: 30vh;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	//页头
	.header {
		background-color: #fff;
		padding: 60rpx 30rpx 120rpx 30rpx;
		margin-bottom: 10rpx;
		padding-top: calc(22px + var(--status-bar-height));
		position: relative;
		border-bottom-right-radius: 60rpx;
	
		.head-bar {
			height: 44rpx;
		}
	}
	// 筛选
	.filter-bar {
		display: flex;
		color: #fff;
		// padding: 0 30rpx;
	
		// justify-content: space-between;
		.item {
			background-color: rgba(241, 241, 241, 0.32);
			padding: 8rpx 32rpx;
			border-radius: 28rpx;
			// margin-right: 10rpx;
		}
	}
	// 宫格展示
	.grid-box {
		background-color: #fff;
		margin: 0 30rpx;
		padding: 30rpx;
		border-radius: 12rpx;
		margin-top: 30rpx;
		
		.total-title{
			font-size: 32rpx;
		}
		
		.title {
			font-size: 28rpx;
			color: $u-tips-color;
		}
	
		.number {
			margin-top: 10rpx;
		}
	}
	// 条形进度条显示
	.progress-box{
		.progress-item:nth-child(1),.progress-item:nth-child(2),.progress-item:nth-child(3),.progress-item:nth-child(4),.progress-item:nth-child(5){
			height: initial!important;
			border-bottom: 1px dashed #f1f1f1!important;
			padding-bottom: 20rpx!important;
			padding-top: 20rpx!important;
		}
		&.on{
			>.progress-item{
				height: initial!important;
				border-bottom: 1px dashed #f1f1f1!important;
				padding-bottom: 20rpx!important;
				padding-top: 20rpx!important;
			}
		}
		
		.progress-item {
			border-bottom: 1px dashed #f1f1f1;
			padding-bottom: 20rpx;
			padding-top: 20rpx;
			transition: all 0.3s;
			height: 0;
			overflow: hidden;
			padding: 0;
			border: 0;
			
			.name {
				font-size: 32rpx;
			}

			.number{
				font-weight: inherit!important;
			}
		}
	}
	.content{
		margin-top: -120rpx;
		position: relative;
		padding-bottom: 30rpx;
		.item{
			.item-t{
				margin-bottom: 10rpx;
			}
			.title{
				font-size: 28rpx;
			}
			.unit{
				font-size: 32rpx;
				color: #000;
			}
			.number{
				font-size: 42rpx;
				font-weight: bold;
				color: #000;
			}
		}
		.lower-level{
			display: flex;
			margin-top: 30rpx;
			.cell {
				padding: 10px 0;
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				text-align: center;
				background-color: $u-bg-color;
				flex: 1;
				.cell-t{
					margin-bottom: 10rpx;
				}
			}
			
			.divider {
				height: 80rpx;
				background-color: #fff;
				margin: 0 10rpx;
			}
		}
	}
	.dashed-line{
		position: relative;
		left: -30rpx;
		width: 690rpx;
		border-bottom: 1px dashed #e4e7ed;
		&:after{
			content: '';
			width: 28rpx;
			height: 28rpx;
			border-radius: 28rpx;
			background-color: #f7f7f7;
			display: block;
			position: absolute;
			top: -14rpx;
			left: -14rpx;
			
		}
		&:before{
			content: '';
			width: 28rpx;
			height: 28rpx;
			border-radius: 28rpx;
			background-color: #f7f7f7;
			display: block;
			position: absolute;
			top: -14rpx;
			right: -14rpx;
		}
	}
</style>
